<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header content="售后详情" @back="router.back()" />
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <template #header>
        <div class="card-header">
          <span>售后信息</span>
        </div>
      </template>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content ep-bg-purple">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="退款状态"
                >{{ formData.status_desc || "-" }}
              </el-form-item>
              <el-form-item label="申请时间">
                {{ formData.create_time || "-" }}
              </el-form-item>
              <el-form-item
                label="退款金额"
                v-if="Number(formData.actual_refund_amount)"
              >
                <span class="text-red">{{
                  formData.actual_refund_amount
                }}</span>
              </el-form-item>
              <el-form-item label="退款金额" v-else>
                <span class="text-red">{{ formData.apply_refund_amount }}</span>
              </el-form-item>
              <el-form-item label="退款说明"
                >{{ formData.refund_remark || "-" }}
              </el-form-item>
              <el-form-item label="审核时间"
                >{{ formData.verify_time || "-" }}
              </el-form-item>
            </el-form>
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content ep-bg-purple-light">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="售后单号"
                >{{ formData.sn || "-" }}
              </el-form-item>
              <el-form-item label="退款方式"
                >{{ formData.refund_method_desc || "-" }}
              </el-form-item>
              <el-form-item label="退款原因"
                >{{ formData.refund_reason || "-" }}
              </el-form-item>
              <el-form-item label="退款凭证">
                <div v-if="formData.refund_image.length != 0">
                  <el-image
                    v-for="item in formData.refund_image"
                    :key="item.id"
                    :src="getImageUrl(item)"
                    style="width: 58px; height: 58px"
                    class="flex-none"
                  ></el-image>
                </div>

                <span v-if="formData.refund_image.length == 0">无</span>
              </el-form-item>
              <el-form-item label="售后说明"
                >{{ formData.verify_remark || "-" }}
              </el-form-item>
            </el-form>
          </div></el-col
        >
      </el-row>
      <el-button v-if="formData.status == 0" @click="handleagree" type="primary"
        >同意售后</el-button
      >
      <el-button
        v-if="formData.status == 0"
        type="danger"
        @click="handeleremark"
        >拒绝售后</el-button
      >
      <el-button
        v-if="formData.status == 1"
        @click="handledelcancel"
        type="primary"
        >确认退款</el-button
      >
    </el-card>

    <el-card class="!border-none mt-4" shadow="never">
      <template #header>
        <div class="card-header">
          <span>订单信息</span>
        </div>
      </template>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content ep-bg-purple-light">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="订单状态"
                >{{ formData.order_info.order_status_desc || "-" }}
              </el-form-item>
              <el-form-item label="配送方式"
                >{{ formData.order_info.delivery_type_desc || "-" }}
              </el-form-item>
              <el-form-item label="支付时间"
                >{{ formData.order_info.pay_time || "-" }}
              </el-form-item>
              <el-form-item label="完成时间"
                >{{ formData.order_info.finish_time || "-" }}
              </el-form-item>
              <el-form-item label="商家备注">
                <span class="text-word">{{
                  formData.order_info.order_remark || "-"
                }}</span>
              </el-form-item>
            </el-form>
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content ep-bg-purple-light">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="订单编号">
                <span class="text-blue">
                  {{ formData.order_info.sn || "-" }}</span
                >
              </el-form-item>
              <el-form-item label="买家信息">
                <span class="text-blue">
                  {{ formData.order_info.user.nickname || "-" }}
                  ({{ formData.order_info.user.sn }})
                </span>
              </el-form-item>
              <el-form-item label="团长信息"
                >{{ formData.order_info.teamhead.name }}-{{
                  formData.order_info.teamhead.real_name || "-"
                }}
              </el-form-item>
              <el-form-item label="下单时间">
                {{ formData.order_info.create_time || "-" }}</el-form-item
              >
              <el-form-item label="用户备注">
                <span class="text-word">
                  {{ formData.order_info.user_remark || "-" }}
                </span>
              </el-form-item>
            </el-form>
          </div></el-col
        >
      </el-row>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <template #header>
        <div class="card-header">
          <span>退款商品</span>
        </div>
      </template>
      <el-table size="large" class="mt-[14px]" :data="formData.order_goods">
        <el-table-column label="商品货号" prop="goods_code" />
        <el-table-column label="商品信息" prop="goods_name">
          <template #default="{ row }">
            <div class="mt-[6px] flex" style="height: 65px">
              <el-image
                :src="row.goods_image"
                style="width: 58px; height: 58px"
                class="flex-none"
              >
              </el-image>
              <div class="ml-[3px] flex flex-col justify-between">
                <span>{{ row.goods_name }}</span>
                <span>￥{{ `${row.goods_price}x${row.goods_num}` }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="goods_price">
          <template #default="{ row }"> ￥{{ row.goods_price }} </template>
        </el-table-column>
        <el-table-column label="数量" prop="goods_num" />
        <el-table-column label="商品总额">
          <template #default="{ row }"> ￥{{ row.total_price }} </template>
        </el-table-column>
        <el-table-column label="优惠金额">
          <template #default="{ row }">
            ￥{{
              (Number(row.total_price) - Number(row.total_pay_price)).toFixed(2)
            }}
          </template>
        </el-table-column>
        <el-table-column label="实付金额" prop="total_pay_price">
          <template #default="{ row }"> ￥{{ row.total_pay_price }} </template>
        </el-table-column>
      </el-table>
      <div class="text-right mr-20 mt-4">
        <span class="ml-5"
          >实际支付：
          <span class="text-red"> ￥{{ formData.total_pay_price }} </span>
        </span>
      </div>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <template #header>
        <div class="card-header">
          <span>订单日志</span>
        </div>
      </template>
      <el-table size="large" class="mt-[14px]" :data="formData.after_sale_log">
        <el-table-column label="操作人" prop="operator" />
        <el-table-column label="操作内容" prop="content" />
        <el-table-column label="记录日期" prop="create_time" />
      </el-table>
    </el-card>
    <edit-popup v-if="showEdit" ref="editRef" @close="showEdit = false" />
    <refuse-popup
      v-if="showrefuseEdit"
      ref="refuseRef"
      @close="handleclose"
      :refund_method_desc="formData.refund_method_desc"
      :apply_refund_amount="formData.apply_refund_amount"
    />
  </div>
</template>

<script lang="ts" setup>
import { aftersaleDetial, aftersaleagree } from "@/api/order";
import feedback from "@/utils/feedback";
import EditPopup from "./components/remark.vue";
import RefusePopup from "./components/refund.vue";
import useAppStore from "@/stores/modules/app";

const { getImageUrl } = useAppStore();
const route = useRoute();
const router = useRouter();
const formData: any = ref({
  order_info: {
    user: {},
    teamhead: {},
  },
  order_goods: [],
  after_sale_log: [],
  total_pay_price: "",
  refund_image: [],
});

const getDetails = async () => {
  const data = await aftersaleDetial({
    id: route.query.id,
  });
  formData.value = data;
  formData.value.total_pay_price = data.order_goods[0].total_pay_price;
};
getDetails();
//拒接售后
const showEdit = ref(false);
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const handeleremark = async (row: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open();
  editRef.value?.setFormData(row);
  getDetails();
};

// 同意售后
const handleagree = async () => {
  await aftersaleagree({ id: route.query.id });
  getDetails();
};
// 确认退款
const showrefuseEdit = ref(false);
const refuseRef = shallowRef<InstanceType<typeof EditPopup>>();
const handleclose = () => {
  showrefuseEdit.value = false;
  // router.back()
  getDetails();
};
const handledelcancel = async () => {
  showrefuseEdit.value = true;
  await nextTick();
  refuseRef.value?.open();
};
</script>
<style lang="scss" scope>
.text-red {
  color: red;
}
.text-blue {
  color: rgba(64, 115, 250, 1);
}
.text-word {
  word-break: break-all;
  width: 80%;
}
</style>
